<template>
  <div class="playing-status">
    1
    <span class="line1"></span>
    <span class="line2"></span>
    <span class="line3"></span>
  </div>
</template>

<script>
</script>

<style>
  .playing-status { display: inline-block; width: 80rpx;height: 48rpx; line-height: 80rpx; text-align: center; position: relative; vertical-align: bottom; } 
  .playing-status span { display: inline-block; width: 8rpx; margin-bottom: 0; background-color: #FE6B00; margin-right: -20rpx; } 
  .playing-status span.line1 { animation: line 0.6s infinite ease-in-out alternate; } 
  .playing-status span.line2 { animation: line 0.6s 0.2s infinite ease-in-out alternate; } 
  .playing-status span.line3 { animation: line 0.6s 0.4s infinite ease-in-out alternate; } 
  @keyframs line { from { height: 4px; } to { height: 12px; } } @-webkit-keyframes line { from { height: 4px; } to { height: 12px; } }
</style>